<template>
	<view class="box">
		<view class="image-box">
			<image class="back" src="../../static/images/icons/back.svg" @click="login"></image>
			<image class="bg-img" src="../../static/images/login/bg-1.png" mode="widthFix"></image>
		</view>
		<view class="login-box">
			
			<view class="title">注册</view>
			<view class="input-box">
				<uni-forms ref="form" :modelValue="formData">
					<uni-forms-item name="username">
						<input class="uni-input" type="text" @input="inputEvent"  maxlength="16" v-model="formData.username" placeholder="请输入用户名" />
					</uni-forms-item>
					<uni-forms-item name="password" >
						<input class="uni-input" type="password" @input="inputEvent" maxlength="16" v-model="formData.password" placeholder="请输入密码"/>
					</uni-forms-item>
					<uni-forms-item name="confirmPassword" >
						<input class="uni-input" type="password" @input="inputEvent" maxlength="16" v-model="formData.confirmPassword" placeholder="请确认密码"/>
					</uni-forms-item>
					<checkbox checked>
						<view>
							已阅读和同意《用户注册协议》《个人信息保护政策》和《儿童信息个人保护政策》
						</view>
					</checkbox>
				</uni-forms>
				<button @click="signup" :disabled="tag">注册</button>
			</view>
		</view>
		<view class="dialog">
			<view :style="messageStyle">
				{{message}}
			</view>
		</view>
	</view>
</template>

<script>
	import {addUser} from "../../static/js/User.js"
	export default {
		data() {
			return {
				formData:{
					"username":'',
					"password":'',
					"confirmPassword":''
					
				},
				"messageStyle":"opacity: 0;",
				"tag":true,
				"message":""
			}
		},
		methods: {
			signup(){
				if(this.formData.password != this.formData.confirmPassword){
					this.errorMsg("两次输入密码不一致，请确认密码");
					return false
				}
				if(this.formData.username != "" && this.formData.password != ""
					&& this.formData.confirmPassword != ""){
					addUser(this.formData).then(res=>{
						if(res.code == 200){
							uni.navigateBack({
								url: '/pages/login/login'
							})
							return true
						}
					}).catch(err=>{
						this.errorMsg("网络连接错误，请检查网络情况")
					})
				}
				
			},
			inputEvent(){
				if(this.formData.username.length > 5 && this.formData.password.length > 5 && this.formData.confirmPassword.length > 5 ){
					this.tag = false
				}else{
					this.tag = true
				}
			},
			login(){
				uni.navigateBack({
					url: '/pages/login/login'
				})
			},
			errorMsg(msg){
				this.message = msg
				this.messageStyle="opacity: 0.7;"
				setTimeout(()=>{
					this.messageStyle="opacity: 0;"
				},3000)
				this.formData = {"username":'',"password":'',"confirmPassword":''}
			}
		}
	}
</script>

<style>
	.box{
		background: #c8eb21 ;
		background-size: cover;
	}
	.image-box{
		padding-top: 100rpx;
	}
	.image-box .bg-img{
		margin-left: 60rpx;
		width: 100%;
		object-fit: cover;
	}
	.back {
		position: relative;
		height: 42rpx;
		width: 42rpx;
		margin-left: 40rpx;
		top: 45rpx;
	}
	.login-box{
		margin-top: 30rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background: #fff;
		padding: 30rpx;
	}
	.title{
		font-size: 36rpx;
		font-weight: bolder;
	}
	.uni-forms{
		margin: 50rpx 0;
	}
	.uni-forms-item{
		margin-bottom: 30rpx;
		border-radius: 20rpx;
	}
	.uni-input{
		border-radius: 20rpx;
		padding: 20rpx;
		background: #f7f7f7 ;
	}
	checkbox{
		margin: 30rpx 0;
		font-size: 24rpx;
	}
	button{
		background-color: #c8eb21 ;
		color: #000;
		font-weight: bolder;
		border-radius: 20rpx;
		enable-background: 100%;
		background-color: #c8eb21;
		color:#000;
	}
	.signup{
		margin-top: 30rpx;
		float: right;
		font-size: 24rpx;
	}
	.dialog{
		background-color: #fff;
		padding-top: 100rpx;
	}
	.dialog > view{
		background-color: #000;
		color: #fff;
		text-align: center;
		padding: 10rpx 0rpx;
		width: 50%;
		margin: auto;
		border-radius: 20rpx;
		font-size: 24rpx;
		opacity:0.7;
		transition: all linear 0.5s;
	}
</style>
